<template>
  <q-card flat>
    <q-tabs
      dense
      v-model="pageParam.type"
      @update:model-value="
        (val) => {
          router.push({
            path: '/personal/' + userId + '/' + val,
          })
        }
      "
      align="left"
      active-color="primary"
    >
      <q-tab v-for="item in articleTab" :key="item.code" :name="item.code" :label="item.text" />
    </q-tabs>
    <div class="absolute-right row items-center">
      <q-input
        dense
        v-model="pageParam.text"
        type="text"
        label="查询字段"
        debounce="500"
        @update:model-value="
          (val) => {
            pageParam.pageNum = 1
            pageParam.text = val as string
            f5()
          }
        "
      />
      <q-btn
        flat
        icon="refresh"
        @click="
          () => {
            f5()
          }
        "
      >
        <q-tooltip> 刷新 </q-tooltip>
      </q-btn>
    </div>
  </q-card>
  <div class="column">
    <q-card v-for="item in rows" :key="item.id" title="查看博客" class="q-mt-sm" flat>
      <ItemArticle :item="item"></ItemArticle>
      <q-separator />
    </q-card>
    <div class="q-mt-sm" v-show="loading">
      <SkeletonArticle></SkeletonArticle>
    </div>

    <q-card v-if="!loading && rows.length == 0" flat class="q-mt-sm q-ml-sm">
      <q-card-section class="text-center dark:bg-neutral-700">
        <div
          class="h-xs w-full bg-contain bg-center bg-no-repeat"
          style="background-image: url('images/no-data.svg')"
        ></div>

        <div class="text-base">暂无文章~~</div>
      </q-card-section>
    </q-card>
    <div class="q-py-sm full-width row flex-center" v-show="!loading && pageParam.totalPage > 1">
      <div>共 {{ pageParam.recordCount }} 篇文章</div>
      <q-pagination
        @update:model-value="
          (value) => {
            pageParam.pageNum = value
            f5()
          }
        "
        v-model="pageParam.pageNum"
        :max="pageParam.totalPage"
        :max-pages="6"
        direction-links
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import ItemArticle from 'src/components/ItemArticle.vue'
import SkeletonArticle from 'src/components/SkeletonArticle.vue'
import type { ApiType } from 'src/service/api'
import { personalArticle } from 'src/service/api'
import { onMounted, ref, watch } from 'vue'
import { artHas, articleTab } from './shared'
import { useRouter } from 'vue-router'

const loading = ref(false)

type rowsType = ApiType<typeof personalArticle>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

const router = useRouter()

const props = defineProps<{
  userId: string
  panelTab: string
}>()

watch(
  () => props.panelTab,
  (val) => {
    if (artHas(val)) {
      pageParam.value.type = val
      f5()
    }
  },
)

watch(
  () => props.userId,
  (val) => {
    if (artHas(val)) {
      pageParam.value.userId = val
      f5()
    }
  },
)

const pageParam = ref({
  userId: props.userId,
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  text: '',
  type: props.panelTab,
})

onMounted(() => {
  if (artHas(pageParam.value.type)) {
    f5()
  }
})

const f5 = () => {
  rows.value = []
  loading.value = true
  personalArticle(pageParam.value).then((res) => {
    loading.value = false
    const { data, error } = res
    if (!error) {
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
      rows.value = res.data.rows
    }
  })
}
</script>

<style scoped></style>
